<template>
  <div class="activity">
    <img
      class="icon"
      src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ"
    >
    <el-popover
      placement="left"
      title="提示"
      width="200"
      trigger="hover"
    >
      <div class="assignees">
        <div>指定用户：</div>
        <div class="tag-warp">
          <el-tag
            v-for="(assignee, index) in assigneesFormat.user"
            :key="index + '_user'"
            style="margin-top: 10px; margin-right: 5px;"
          >
            {{ assignee.assignee_name }}
          </el-tag>
        </div>

        <div style="margin-top: 10px;">指定角色：</div>

        <div class="tag-warp">
          <el-tag
            v-for="(assignee, index) in assigneesFormat.role"
            :key="index + '_role'"
            style="margin-top: 10px;"
          >
            {{ assignee.assignee_name }}
          </el-tag>
        </div>
      </div>
      <div slot="reference" class="info">{{ info }}</div>
    </el-popover>

  </div>
</template>
<script>
export default {
  name: 'ActivityNode',
  inject: ['getNode'],
  data() {
    return {
      info: '审批人',
      assignees: []
    }
  },

  computed: {
    assigneesFormat() {
      const result = {
        user: [],
        role: []
      }

      for (const assignee of this.assignees) {
        if (assignee.assignee_type === 'role') {
          result.role.push(assignee)
        } else {
          result.user.push(assignee)
        }
      }

      return result
    }
  },

  mounted() {
    const node = this.getNode()

    if (node) {
      const { data } = node
      const flag = data.assignees.length >= 1 && data.assignees[0].assignee_name
      this.assignees = flag ? data.assignees : []
      this.info = this.assignees.map(item => item.assignee_name).join(',').slice(0, -1) || '审批人'
    }
    node.on('change:data', ({ current }) => {
      const { name, assignees } = current
      this.assignees = assignees
      this.info = assignees.map(item => item.assignee_name).join(',').slice(0, -1)
    })
  }
}
</script>
<style lang="scss" scoped>
.activity {
  width: 120px;
  height: 60px;
  border: 1px solid #5F95FF;
  background-color: #EFF4FF;
  border-radius: 5px;
  padding: 5px;

  .icon {
    width: 16px;
    height: 16px;
  }

  .info {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  .tag-warp {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
